<script setup>
import { onMounted, reactive, ref } from 'vue'
import { queryArea } from '@api/question'
import { difference } from 'lodash'

defineProps({
  disabled: Boolean,
})

const formRef = ref()

const form = reactive({
  indexName: '',
  // areaId: '',
  year: '',
  explain: '',
  // type: '',
})

const formRules = {
  indexName: [{ required: true, message: '请输入指标名称', trigger: 'blur' }],
  // areaId: [{ required: true, message: '请选择体检城市', trigger: 'change' }],
  year: [{ required: true, message: '请输入体检年份', trigger: 'blur' }],
}

// const areaInfo = ref([])

// const cityOptions = ref([])

// const casxaderProps = {
//   value: 'areaCode',
//   label: 'areaName',
//   checkStrictly: true,
//   multiple: true,
// }

// let oldValue = []

// const handleChangeArea = (value) => {
//   // console.log(value)
//   const diff = difference(value, oldValue)
//   const diffType = diff.length > 0 ? 'add' : 'remove'
//   // console.log(diff)
//   // console.log(diffType)
//   if (diffType === 'add') {
//     // 这种情况说明是新增勾选
//     const isCheckCQ = diff[0].length === 1
//     if (isCheckCQ) {
//       // 这种情况说明新增勾选的是重庆
//       form.areaId = diff[0][0]
//       form.type = 'city'
//       // 然后将渲染的数组更改为只有重庆
//       areaInfo.value = value.splice(0, 1)
//     } else {
//       // 这种情况说明新增勾选的是区县
//       const isCheckCQ = value.filter((item) => item.length === 1)
//       // console.log(isCheckCQ)
//       if (isCheckCQ.length) {
//         // 新增勾选是区县时，如果前面勾选过重庆，则去除勾选的重庆
//         areaInfo.value = value.splice(1, value.length - 1)
//       }
//       // 然后从areaInfo当中取值
//       form.areaId = areaInfo.value
//         .map((item) => {
//           return item[1]
//         })
//         .toString()
//       form.type = 'region'
//     }
//   } else {
//     // 这种情况说明是取消勾选
//     // console.log(areaInfo.value)
//     // 重庆取消勾选数组必为空
//     // 所以只需要考虑存在值的情况
//     if (value.length) {
//       form.areaId = value
//         .map((item) => {
//           return item[1]
//         })
//         .toString()
//       form.type = 'region'
//     } else {
//       form.areaId = ''
//       form.type = ''
//     }
//   }
//   oldValue = areaInfo.value
// }

// const removeChildrenAtLevel = (tree, targetLevel) => {
//   // 遍历树中的每个节点
//   for (let i = 0; i < tree.length; i++) {
//     // 检查当前节点的level是否为目标level
//     if (tree[i].level === targetLevel) {
//       // 如果是的话，移除children属性
//       delete tree[i].children
//     }
//
//     // 如果当前节点还有子节点，并且子节点的level也为目标level，则递归处理子节点
//     if (tree[i].children && tree[i].children.length > 0) {
//       removeChildrenAtLevel(tree[i].children, targetLevel)
//     }
//   }
//
//   return tree
// }

// const getAreaList = () => {
//   queryArea({}).then((res) => {
//     if (res.success) {
//       cityOptions.value = removeChildrenAtLevel(res.data, 1)
//     }
//   })
// }

onMounted(() => {
  // getAreaList()
})

const getValues = () => {
  return { ...form }
}

const validate = () => {
  return formRef.value.validate()
}

const inputData = (obj) => {
  Object.assign(form, obj)
  form.year = form.year + ''
  // if (form.type === 'region') {
  //   areaInfo.value = form.areaId.split(',').map((item) => {
  //     return ['-1', item]
  //   })
  // } else {
  //   areaInfo.value = [['-1']]
  // }
  // oldValue = areaInfo.value
}

defineExpose({
  getValues,
  validate,
  inputData,
})
</script>

<template>
  <div class="base-info">
    <div class="content-title">
      <svg-icon icon-class="标题图标" />
      <span>基本信息</span>
    </div>
    <el-form
      ref="formRef"
      :model="form"
      :rules="formRules"
      label-position="top"
    >
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="指标体系名称" prop="indexName">
            <el-input
              v-model="form.indexName"
              placeholder="请输入指标体系名称"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <!--        <el-col :span="8">-->
        <!--          <el-form-item label="体检城市" prop="areaId">-->
        <!--            <el-cascader-->
        <!--              v-model="areaInfo"-->
        <!--              :options="cityOptions"-->
        <!--              :props="casxaderProps"-->
        <!--              placeholder="体检城市"-->
        <!--              class="area-cascader"-->
        <!--              :show-all-levels="false"-->
        <!--              @change="handleChangeArea"-->
        <!--              :disabled="disabled"-->
        <!--            ></el-cascader>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="8">
          <el-form-item label="体检年份" prop="year">
            <!--            <el-input-->
            <!--              type="number"-->
            <!--              v-model="form.year"-->
            <!--              placeholder="请输入体检年份"-->
            <!--              :disabled="disabled"-->
            <!--            />-->
            <el-date-picker
              v-model="form.year"
              type="year"
              :disabled="disabled"
              placeholder="选择年"
              value-format="yyyy"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="指标体系说明" prop="explain">
            <el-input
              type="textarea"
              :rows="3"
              v-model="form.explain"
              placeholder="请输入指标体系说明"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.base-info {
  :deep(.el-form) {
    .el-input__inner {
      background: #f9fbff;
      border-radius: 4px;
      border: 1px solid #e1ecf5;
      width: 300px;
    }

    .el-textarea__inner {
      background: #f9fbff;
      border-radius: 4px;
      border: 1px solid #e1ecf5;
      font-family: Arial;
    }

    .el-form-item {
      margin-bottom: 0;
    }

    .el-form-item__label {
      padding-bottom: 0;
    }
  }
}
</style>
